<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="left" class="main-from">
    <el-form-item class="el-large" label="1. 您的学费来源" prop="source">
      <el-select v-model="ruleForm.source"  placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="2. 您去年的年收入">
      <el-select v-model="ruleForm.income"  placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
      <p class="hint">（包括工资、奖金、分红、投资所得等）</p>
    </el-form-item>
    <el-form-item class="el-large" label="请选择货币单位：" prop="unit">
      <el-radio v-model="ruleForm.unit" label="1" size="large">人民币</el-radio>
      <el-radio v-model="ruleForm.unit" label="2" size="large">欧元</el-radio>
      <el-radio v-model="ruleForm.unit" label="3" size="large">美元 </el-radio>
    </el-form-item>
    <el-form-item class="maxwidth">
      <p class="el-form-item__label label__width">
        3. 您是否在申请其它院校的金融MBA课程？
      </p>
      <div>
        <el-radio v-model="ruleForm.mbaclass" label="1" size="large">否</el-radio>
      </div>
      <div class="otherbox">
        <el-radio v-model="ruleForm.mbaclass" label="2" size="large">是，我在申请
        </el-radio>
        <el-input v-model="ruleForm.mbaclass_other" class="line_input" />
        <p class="ts_r">（院校及课程名称）</p>
      </div>
    </el-form-item>
    <el-form-item class="maxwidth">
      <p class="el-form-item__label label__width">
        4. 您是通过下列哪种渠道第一次接触到有关中欧FMBA课程信息的？
      </p>
      <el-checkbox-group v-model="checkedCities" class="course_information">
        <div v-for="item in list" :key="item.id" class="child">
          <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
        </div>
        <div class="child">
          <el-checkbox :label="11">其它，请注明</el-checkbox>
          <input v-model="ruleForm.fmbainfo_other" class="line_input" />
        </div>
      </el-checkbox-group>

    </el-form-item>
    <el-form-item class="maxwidth" label="" prop="name">
      <p class="describe">
        <span class="text">5.</span>
        请列举您经常阅读的微信公众号
      </p>
      <el-input v-model="ruleForm.wechat" :rows="4" type="textarea" placeholder="" />
    </el-form-item>
    <el-form-item class="maxwidth" label="" prop="name">
      <p class="describe">
        <span class="text">6.</span>
        请列举您经常使用的商业财经类APP
      </p>
      <el-input v-model="ruleForm.app" :rows="4" type="textarea" placeholder="" />
    </el-form-item>

    <el-form-item label="" class="brbox maxwidth">
      <p class="describe">
        <span class="text">7.</span>
        您是否在任何国家有过任何犯罪或不良记录？
        <b class="red">*</b>
      </p>
      <el-col :span="24">
        <el-form-item prop="badrecord">
          <el-radio-group v-model="ruleForm.badrecord">
            <el-radio label="否"></el-radio>
            <el-radio label="是，请说明"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="badrecord_other">
          <el-input v-model="ruleForm.badrecord_other" :rows="4" type="textarea" placeholder="" />
        </el-form-item>
      </el-col>
    </el-form-item>
    <div class="footer-but">
      <el-button type="primary" @click="saveForm('ruleForm')">保存</el-button>
      <el-button type="info" @click="resetForm('ruleForm')">重置</el-button>
    </div>
  </el-form>
</template>

<script>
import rules from "@/util/rules.js";
export default {
  name: "other", //其他信息
  props: {},
  data() {
    return {
      checkedCities: [],
      list: [
        { name: "中欧学员校友介绍", id: 1 },
        { name: "中欧举办的各种论坛和其他课程", id: 2 },
        { name: "有关中欧的媒体报道", id: 3 },
        { name: "报纸杂志广告", id: 4 },
        { name: "中欧的网站", id: 5 },
        { name: "中欧推广活动", id: 6 },
        { name: "搜索引擎", id: 7 },
        { name: "本公司人力资源部门", id: 8 },
        { name: "外部论坛", id: 9 },
        { name: "在线广告和社区", id: 10 },
      ],
      ruleForm: {
        source: "",
        income: "",
        unit: "",
        mbaclass: "",
        mbaclass_other: "",
        wechat: "",
        app: "",
        badrecord: "",
        badrecord_other: "",
      },
      rules: rules,
    };
  },
  methods: {
    saveForm(formName) {
      console.log("保存");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      (this.ruleForm = {}), this.$refs[formName].resetFields();
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.main-from {
  .label__width {
    width: 100%;
  }

  .otherbox {
    ::v-deep .el-input {
      width: 75% !important;
    }

    ::v-deep .el-input__wrapper {
      border: none;
      height: 22px;
      border-bottom: 1px solid #003963;
      box-shadow: none;
      border-radius: 0;
    }

    .ts_r {
      width: 100%;
      color: #5a5a5a;
      text-align: center;
    }
  }

  .hint {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5a5a5a;
  }

  .course_information {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .child {
      width: 50%;

      &:last-child {
        width: 100%;
        .line_input {
          border: none;
          width: 60%;
          border-bottom: 1px solid #003963;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #5A5A5A;
          margin-left: 5px;

          &:focus {
            outline: none;
          }
        }
      }
    }
  }



  .describe {
    position: relative;
    padding-left: 10px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5a5a5a;
    line-height: 30px;
    margin-bottom: 20px;

    .text {
      position: absolute;
      left: -10px;
      margin-left: 5px;
    }

    .black {
      color: #0b0b0b;
      font-family: MicrosoftYaHei-Bold;
      font-weight: bold;
    }

    .label {
      display: block;
    }
  }

  .footer-but {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;

    ::v-deep .el-button {
      width: 250px;
      height: 55px;
      margin: 30px 22.5px;
    }
  }

  .brbox {

    .el-radio-group,
    .el-radio {
      display: block;
    }

    ::v-deep .el-col-24 {
      margin-top: 15px;
      float: none;
    }
  }


}

@media (max-width: 768px) {
  .main-from {
    .label__width {
      max-width: 100%;
      width: 100%;
    }

    .otherbox {
      ::v-deep .el-input {
        width: 100% !important;
      }
    }

    .hint {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #5a5a5a;
    }

    .course_information {
      width: 100%;
      display: block;

      .child {
        flex: 0 0 100%;

        &:last-child {
          margin-left: 0px;
          flex: 0 0 100%;
        }
      }
    }

    .footer-but {
      ::v-deep .el-button {
        width: 125px;
        height: 40px;
        margin: 31px 22.5px;
        font-size: 16px;
      }
    }
  }
}
</style>
